<template>
	<swiper
		class="swiper"
		:indicator-dots="config.dots"
		:autoplay="config.autoplay"
		:interval="config.interval"
		:duration="config.duration"
		:indicator-color="config.dotscolor"
		:indicator-active-color="config.dotscolor_active"
		:style="{'height':config.height}"
	>
		<swiper-item v-for="(b,index) in swiperList" :key="index">
			<view class="swiper-item" @tap="redirect(b)"><image class="img" :src="b.ImgUrl" mode=""></image></view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default{
		data:function(){
			return{
				config:{
					dots:true,//是否显示圆点
					autoplay:true,//是否自动播放
					interval:3000,//停留时间
					duration:1000,//过度时间
					dotscolor:'rgba(38, 202, 211, 0.21)',//圆点颜色 raba
					dotscolor_active:'rgba(38, 202, 211,.9)',//激活的圆点颜色
					jump:true// 是否跳转页面
				}
			}
		},
		props:{
			//数据
			swiperList:{
				type:Array,
				default:[]
			},
			
			contentHeight:{
				type:Number,
				default:200
			}
		},
		methods:{
			redirect(swiper){
				if(!this.config.jump) return;
				this.$emit('gotoUrl',swiper)
			}
		},
		created:function(){
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height
			};
		}
	}
</script>

<style>
</style>
